<div class="dataTable  main-tables">
  <div class="title">{{'UserManagement.ManageUser.Manage_Users' | translate}}</div>
  <div class="table-content">
    <div class="table-buttons">
      <div class="table-buttons-left">
        <!-- <div class="operate" (click)="addOrEdit('add')" *ngIf="accessButton.Create"><i
          class="iconfont icon-add"></i>{{'UserManagement.ManageUser.Create' | translate}}</div>
      <div class="operate" (click)="addOrEdit('edit')" *ngIf="accessButton.Edit"><i
          class="iconfont icon-pen01"></i>{{'UserManagement.ManageUser.Edit' | translate}}</div>
      <div class="operate" (click)="delete()" *ngIf="accessButton.Delete"><i
          class="iconfont icon-fork"></i>{{'UserManagement.ManageUser.Delete' | translate}}</div>
      <div class="left-button-last" (click)="refresh()"><i class="iconfont icon-refresh1"></i></div> -->

        <button class="op-btn" nz-button nzType="primary" (click)="addOrEdit('add')" *ngIf="accessButton?.Create">
          <!-- <i nz-icon nzType="plus" nzTheme="outline"></i> -->
          <svg t="1649734574121" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4498" width="20" height="20"><path d="M512 958.016611c-119.648434 0-232.1288-46.367961-316.736783-130.559656-84.640667-84.255342-131.263217-196.255772-131.263217-315.455235 0-119.168499 46.624271-231.199892 131.232254-315.424271 84.607983-84.191695 197.088348-130.559656 316.736783-130.559656s232.1288 46.367961 316.704099 130.559656c84.67163 84.224378 131.263217 196.255772 131.263217 315.391587 0.032684 119.199462-46.591587 231.232576-131.263217 315.455235C744.1288 911.615966 631.648434 958.016611 512 958.016611zM512 129.983389c-102.623626 0-199.071738 39.743475-271.583282 111.936783-72.480581 72.12794-112.416718 168.063432-112.416718 270.079828s39.903454 197.951888 112.384034 270.047144c72.511544 72.191587 168.959656 111.936783 271.583282 111.936783 102.592662 0 199.071738-39.743475 271.583282-111.936783 72.480581-72.160624 112.416718-168.063432 112.384034-270.079828 0-102.016396-39.903454-197.919204-112.384034-270.016181C711.071738 169.759548 614.592662 129.983389 512 129.983389z" p-id="4499" fill="#ffffff"></path><path d="M736.00086 480.00086 544.00086 480.00086 544.00086 288.00086c0-17.664722-14.336138-32.00086-32.00086-32.00086s-32.00086 14.336138-32.00086 32.00086l0 192L288.00086 480.00086c-17.664722 0-32.00086 14.336138-32.00086 32.00086s14.336138 32.00086 32.00086 32.00086l192 0 0 192c0 17.695686 14.336138 32.00086 32.00086 32.00086s32.00086-14.303454 32.00086-32.00086L544.00258 544.00086l192 0c17.695686 0 32.00086-14.336138 32.00086-32.00086S753.696546 480.00086 736.00086 480.00086z" p-id="4500" fill="#ffffff"></path></svg>
          {{'UserManagement.ManageUser.Create' | translate}}
        </button>
        <button class="op-btn" nz-button nzType="primary" (click)="addOrEdit('edit')" *ngIf="accessButton?.Edit">
          <!-- <i nz-icon nzType="edit" nzTheme="outline"></i> -->
          <svg t="1649741351323" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5424" width="20" height="20"><path d="M521.152 393.408l319.936-320 45.248 45.312-320 320z" fill="#ffffff" p-id="5425"></path><path d="M896 960H64V64h448v64H128v768h704V448h64v512z" fill="#ffffff" p-id="5426"></path></svg>
          {{'UserManagement.ManageUser.Edit' | translate}}
        </button>
        <button class="op-btn" nz-button nzType="danger" (click)="delete()" *ngIf="accessButton?.Delete">
          <!-- <i nz-icon nzType="delete" nzTheme="outline"></i> -->
          <svg t="1649741442766" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5702" width="20" height="20"><path d="M256 256h554.666667v640H256V256z m42.666667 42.666667v554.666666h469.333333V298.666667H298.666667z m128 128h42.666666v298.666666h-42.666666v-298.666666z m170.666666 0h42.666667v298.666666h-42.666667v-298.666666zM213.333333 256h640v42.666667H213.333333V256z m213.333334-85.333333h213.333333v42.666666h-213.333333V170.666667z" fill="#ffffff" p-id="5703"></path></svg>
          {{'UserManagement.ManageUser.Delete' | translate}}
        </button>
        <button nz-button nzType="primary" (click)="refresh()" nzShape="circle">
          <i nz-icon nzType="reload" nzTheme="outline"></i>
        </button>
      </div>

      <div class="table-buttons-right">
        <itmp-toolbar [toolbarList]="toolbarList" [accessButton]='accessButton'></itmp-toolbar>
        <!-- <div class="svg-padding">
          <svg t="1649742572374" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="11428" width="20" height="20">
            <path
              d="M940.373333 203.093333l-116.053333-150.186666c-10.24-11.946667-25.6-18.773333-40.96-18.773334H240.64c-15.36 0-30.72 6.826667-39.253333 18.773334L85.333333 203.093333c-11.946667 15.36-8.533333 35.84 5.12 47.786667 15.36 11.946667 35.84 8.533333 47.786667-5.12L249.173333 102.4h527.36l110.933334 143.36c6.826667 8.533333 15.36 13.653333 27.306666 13.653333 6.826667 0 15.36-1.706667 20.48-6.826666 6.826667-5.12 11.946667-13.653333 11.946667-22.186667 0-11.946667-1.706667-20.48-6.826667-27.306667z"
              fill="#7D85BB" p-id="11429"></path>
            <path
              d="M890.88 194.56H133.12c-37.546667 0-66.56 30.72-66.56 66.56v662.186667c0 37.546667 30.72 66.56 66.56 66.56h757.76c37.546667 0 66.56-30.72 66.56-66.56V261.12c0-37.546667-29.013333-66.56-66.56-66.56z m-163.84 421.546667L535.893333 805.546667c-6.826667 6.826667-15.36 10.24-23.893333 10.24h-5.12-1.706667c-6.826667-1.706667-13.653333-5.12-18.773333-10.24L296.96 616.106667c-13.653333-13.653333-13.653333-34.133333 0-47.786667 13.653333-13.653333 34.133333-13.653333 47.786667 0l133.12 133.12V401.066667c0-18.773333 15.36-34.133333 34.133333-34.133334s34.133333 15.36 34.133333 34.133334v300.373333l133.12-133.12c13.653333-13.653333 34.133333-13.653333 47.786667 0 11.946667 13.653333 11.946667 34.133333 0 47.786667z"
              fill="#7D85BB" p-id="11430"></path>
          </svg>
        </div> -->
      </div>
    </div>

    <nz-table id="nzTable" #basicTable [nzShowPagination]="false" [nzData]="listOfData" [nzFrontPagination]="false">
      
      <thead>
        <tr class="dataTitle needchangebgc">
          <th *ngFor="let item of renderHeader" class="listTitle">
            <div>{{'UserManagement.ManageUser.' + item.name | translate}}</div>
            <div class="switch no-print" *ngIf="item.name==='Name'">
              <input nz-input placeholder="" [(ngModel)]="queryName" (ngModelChange)="filterSearch()" />
            </div>
            <div class="switch no-print" *ngIf="item.name==='Password'">
              <div style="width: 2.15rem;height: 0.32rem"></div>
            </div>
            <div class="switch no-print" *ngIf="item.name==='Role'">
              <nz-select nzPlaceHolder="All" style="width: 2rem" nzAllowClear [(ngModel)]="roleSelect"
                (ngModelChange)='selectSearch()'>
                <nz-option *ngFor="let option of roleOptions" [nzValue]="option.userRole_Id"
                  [nzLabel]="option.roleName">
                </nz-option>
              </nz-select>
            </div>
            <div class="switch no-print" *ngIf="item.name==='CreateDate'">
              <nz-range-picker nzSize="default"
                [nzPlaceHolder]="['EquipmentManagement.EquipmentManagement.Start Time'|translate, 'EquipmentManagement.EquipmentManagement.End Time'|translate]"
                [(ngModel)]="dateRange" (ngModelChange)="onChange($event)" [nzDisabledDate]="disabledDate">
              </nz-range-picker>
            </div>
            <div class="switch no-print" *ngIf="item.name==='UpdateDate'">
              <nz-range-picker
                [nzPlaceHolder]="['EquipmentManagement.EquipmentManagement.Start Time'|translate, 'EquipmentManagement.EquipmentManagement.End Time'|translate]"
                nzSize="default" [(ngModel)]="dateUpRange" (ngModelChange)="onUpdateChange($event)"
                [nzDisabledDate]="disabledDate"></nz-range-picker>
            </div>
            <div class="switch no-print" *ngIf="item.name==='Organization'">
              <nz-select nzPlaceHolder="All" style="width: 2rem" nzAllowClear [(ngModel)]="orgSelect"
                (ngModelChange)='orgSearch()'>
                <nz-option *ngFor="let option of listOfOption" [nzValue]="option.organization_Id"
                  [nzLabel]="option.organization_Name">
                </nz-option>
              </nz-select>
            </div>
          </th>
        </tr>
      </thead>

      <tbody class="dataList">

        <tr *ngFor="let item of basicTable.data;index as i" (click)="click(i,item)" [class.active]="item.active">
          <td>{{item.user_Name}}</td>
          <!-- <td>{{item.user_Pwd}}</td> -->
          <td>{{item.userRole.roleName}}</td>
          <td>{{item.createTime | date:'yyyy/MM/dd HH:mm'}}</td>
          <td>{{item.updateTime | date:'yyyy/MM/dd HH:mm'}}</td>
          <td>{{item.organization.organization_Name}}</td>
        </tr>
      </tbody>

      <tfoot class="pagination">
        <tr>
          <td [attr.colspan]="renderHeader.length+1" style="padding: 10px;">
            <itmp-pagination [totalEle]="pagination.totalEle" [pageSize]="pagination.pageSize"
              [pageNum]="pagination.currentPage" showCountInfo=true [count]="pagination.currentSize"
              (pageNumChange)="onPageChange($event)" (pageSizeChange)="onSizeChange($event)"></itmp-pagination>
          </td>
        </tr>
      </tfoot>

    </nz-table>
  </div>

</div>
<itmp-add-user (manageUserChange)="updateSuccess()" *ngIf="isVisible" [(visible)]="isVisible" [title]="addUserTitle"
  [manageUser]="selectedUser" [listOfOption]="listOfOption" [selectZoneAssignment]="selectZoneAssignment"
  [roleOptions]="roleOptions" [zoneAssignment]="zoneAssignment" [userId]="userId" [createTime]="createTime">
</itmp-add-user>